<template>
  <a-form-model
    ref="formComp"
    :model="newTaskData"
    layout="horizontal"
    class="AsteriskAfter newEditStyle editNewTask3FormComp rightDrawerWithoutCol"
  >
    <!-- 爬坡控制 -->
    <!-- <a-row>
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('climbControl')" class="customFormModelItem" >
          <new-task-climb-control  :upgrade-trigger-type="upgradeTriggerType"></new-task-climb-control>
        </a-form-model-item>
      </a-col>
    </a-row> -->
    <!-- 熔断保障 -->
    <!-- <a-form-model-item class="customFormModelItem" >
      <template #label>
        {{ $t('rdbz') }}
        <question-mark-tip
          :tip-title="$t('rdbzTip')"
          :popupContainer="(node)=>{return node.parentNode.parentNode.parentNode}"
        ></question-mark-tip>
      </template>
      <a-radio-group name="radioGroup" v-model="newTaskData.satisfyType">
        <a-radio :value="1">
          满足所有
        </a-radio>
        <a-radio :value="2">
          满足任何
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-row :gutter="36">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="升级失败车辆数" >
          <a-input></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="升级失败车辆占比" >
          <a-input></a-input>
        </a-form-model-item>
      </a-col>
    </a-row> -->
    <!-- 任务处理 -->
    <!-- <a-row :gutter="36">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="任务处理" >
          <a-input></a-input>
        </a-form-model-item>
      </a-col> -->
    <!-- 通知送达 -->
    <!-- <a-col :md="12" :sm="24">
        <a-form-model-item label="通知送达" >
          <a-input></a-input>
        </a-form-model-item>
      </a-col>
    </a-row> -->

    <!-- 只有用户升级才有灰度发布 -->
    <a-row v-if="newTaskData.type === '1' && !gcyOta">
      <a-col :md="24" :sm="24">
        <a-switch
          v-model="newTaskData.turnOnGrayscale"
          size="small"
          style="position: absolute; right: 0; z-index: 1000"
        >
        </a-switch>
        <a-form-model-item class="customFormModelItem">
          <template #label>
            {{ $t('greyRelease') }}
            <question-mark-tip
              :tip-title="$t('grayscaleTip')"
              :popupContainer="(node)=>{return node.parentNode.parentNode.parentNode}"
            ></question-mark-tip>
          </template>
          <span style="margin-top:20px" v-show="!newTaskData.turnOnGrayscale">已关闭灰度发布功能</span>
          <grayscale-list
            ref="grayscaleRef"
            v-show="newTaskData.turnOnGrayscale"
            :grayscaleList="newTaskData.grayscaleList"
          ></grayscale-list>
        </a-form-model-item>
      </a-col>
    </a-row>
    <!-- 任务审核(流程图及节点审批用户设置)-->
    <div>
      <a-form-model-item :label="$t('campaignAudit')" class="customFormModelItem"></a-form-model-item>
      <!-- 流程图 -->
      <div style="height:360px;margin-bottom:16px">
        <process-viewer
          :key="`designer-${processView.index}`"
          v-if="processView.index"
          :xml="processView.xmlData"
          style="height:100%" />
      </div>
      <!-- 节点信息 -->
      <audit-flow-process ref="auditProcessRef" method-name="getTaskFlowDesinNodeData" :cache-required="true"></audit-flow-process>
    </div>
  </a-form-model>
</template>
<script>
import { mapState } from 'vuex'
import AuditFlowProcess from '@/views/components/AuditFlowProcess/config.vue'
import GrayscaleList from '@/views/components/GrayscaleList.vue'
import NewTaskClimbControl from './NewTaskClimbControl.vue'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import ProcessViewer from '@/components/ProcessViewer'
import _ from 'lodash'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'
const initProcessView = {
  index: '',
  xmlData: ''
}
export default {
  name: 'NewTaskStep3',
  components: {
    NewTaskClimbControl,
    QuestionMarkTip,
    GrayscaleList,
    AuditFlowProcess,
    ProcessViewer
  },
  computed: {
    ...mapState({
      newTaskDataAll: (state) => state.newTask.newTaskData
    }),
    newTaskData(){
      return this.newTaskDataAll[this.upgradeTriggerType];
    }
  },
  props: {
    upgradeTriggerType : ''
  },
  data () {
    return {
      //是否工程院OTA，是则没有灰度功能
      gcyOta: true,
      processView: {
        ...initProcessView
      },
      loadingProcess: false
    }
  },
  created () {
    this.getProcessXmlData()
  },
  mounted () {
    console.log('242949249')
    //   有缓存的时候使用缓存
  },
  methods: {
    getPopupContainer (node) {
      return node.parentNode.parentNode
    },
    getFormData () {
      const vm = this

      return new Promise((resolve, reject) => {
        const auditConfigData = this.$refs.auditProcessRef.getConfigsData()
        if (auditConfigData.length === 0) {
          reject(new Error(vm.$t('selectApprovalUserTip')))
          return
        }
        // 如果是用户升级且灰度发布开启则需要对灰度发布验证
        // 否则灰度发布传空数组
        let grayscaleItem = []
        if (vm.newTaskData.type === '1' && !vm.gcyOta && vm.newTaskData.turnOnGrayscale) {
          grayscaleItem = _.cloneDeep(vm.newTaskData.grayscaleList)
          let pushCount = 0
          grayscaleItem.forEach(item => {
            pushCount = pushCount + Number(item.pushNumPercent)
          })
          if (pushCount !== 100) {
            vm.$message.warning(vm.$t('tsclzbTip'))
            reject(new Error(vm.$t('tsclzbTip')))
            return
          }
          if (!vm.$refs.grayscaleRef.checkList(grayscaleItem)) {
            vm.$message.error(vm.$t('completeInformation'))
            reject(new Error(vm.$t('completeInformation')))
            return
          }
        }
        resolve({ candidates: auditConfigData === 'noNeedRole' ? [] : auditConfigData, grayscaleItem })
      })
    },
    // 获取流程图
    getProcessXmlData () {
      this.loadingProcess = true
      flowDesignApi.getTaskFlowDesinXmlData().then(res => {
        this.processView.index = 'process' + Math.random
        this.processView.xmlData = res.data
      }).finally(() => {
        this.loadingProcess = false
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.editNewTask3FormComp {
  position: relative;
  height: 100%;
  overflow: auto;
}
</style>
